import React, { PureComponent } from 'react';
import { Row, Col, Icon, Button } from 'antd';
import styles from './index.less';
export default class CouponPreview extends PureComponent {
    render() {
        const { value } = this.props;
        // const rowClass = value.list.length > 2 ? "Three" : value.list.length > 1 ? "Two" : "";
        const rowClass = value.list.length > 2 ? "Other" : value.list.length > 1 ? "Two" : "";
        // const colwith = value.list.length > 2 ? 8 : value.list.length > 1 ? 12 : 24;
        const colwith = value.list.length > 2 ? "" : value.list.length > 1 ? 12 : 24;
        const rowwidth = value.list.length > 2 ?'200%':'100%';
        console.log(value.fontcolor)
        return (
            <div className="rc-design-component-notice-preview CouponList">
                {
                    value.list.length > 1 ?
                        <Row gutter={12} className={rowClass} style={{width:rowwidth}}>
                            {
                                value.list.map((item,index) => {
                                    if (value.style === 1) {
                                        return <Col span={colwith} key={index}>
                                            <div className={`Coupon01 ${value.fontcolor}`} style={{ backgroundColor: value.color }}>
                                                <div className="border">
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style1.png'}
                                                        height={92}
                                                        className="floor_l"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style1.png'}
                                                        height={92}
                                                        className="floor_r"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                </div>
                                            </div>
                                        </Col>
                                    } else if (value.style === 2) {
                                        return <Col span={colwith} key={index}>
                                            <div className={`Coupon02 ${value.fontcolor}`} style={{ backgroundColor: value.color }}>
                                                <div className="border">
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style2.png'}
                                                        height={200}
                                                        className="floor_l"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style2.png'}
                                                        height={200}
                                                        className="floor_r"
                                                    />
                                                </div>
                                            </div>
                                        </Col>
                                    } else if (value.style === 3) {
                                        return <Col span={colwith} key={index}>
                                            <div className={`Coupon03 ${value.fontcolor}`} style={{ backgroundColor: value.color }}>
                                                <div className="border">
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                    <div className="floor_l"></div>
                                                    <div className="floor_r"></div>
                                                </div>
                                            </div>
                                        </Col>
                                    } else if (value.style === 4) {
                                        return <Col span={colwith} key={index}>
                                            <div className={`Coupon04 ${value.fontcolor}`} style={{ backgroundColor: value.color }}>
                                                <div className="border">
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                    <div className="line" style={{ backgroundColor: value.color }}></div>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style4.png'}
                                                        height={41}
                                                        className="floor_r"
                                                    />
                                                </div>
                                            </div>
                                        </Col>
                                    }
                                })
                            }
                        </Row> : value.list.length > 0 ? <Row >
                            {
                                value.list.map((item,index) => {
                                    if (value.style === 1) {
                                        return <Col key={index}>
                                            {/* 下方DIV增加Clss“Red”，字体变为白色 */}
                                            <div className={`Coupon01 ${value.fontcolor}`} style={{ backgroundColor: value.color }} >
                                                <div className="border">
                                                    <p className="text_r">立即领取</p>
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style1.png'}
                                                        height={92}
                                                        className="floor_l"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style1.png'}
                                                        height={92}
                                                        className="floor_r"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                    <p className="floor_t"></p>
                                                    <p className="floor_b"></p>
                                                </div>
                                            </div>
                                        </Col>
                                    } else if (value.style === 2) {
                                        return <Col key={index}>
                                            <div className={`Coupon02 ${value.fontcolor}`} style={{ backgroundColor: value.color }}>
                                                <div className="border">
                                                    <p className="text_r">立即领取</p>
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style2.png'}
                                                        height={200}
                                                        className="floor_l"
                                                    />
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style2.png'}
                                                        height={200}
                                                        className="floor_r"
                                                    />
                                                </div>
                                            </div>
                                        </Col>
                                    } else if (value.style === 3) {
                                        return <Col key={index}>
                                            <div className={`Coupon03 ${value.fontcolor}`} style={{ backgroundColor: value.color }}>
                                                <div className="border">
                                                    <p className="text_r">立即领取</p>
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                    <div className="floor_l"></div>
                                                    <div className="floor_r"></div>
                                                </div>
                                            </div>
                                        </Col>
                                    } else if (value.style === 4) {
                                        return <Col key={index}>
                                            <div className={`Coupon04 ${value.fontcolor}`} style={{ backgroundColor: value.color }}>
                                                <div className="border">
                                                    <p className="text_r">立即领取</p>
                                                    <p className="money">{item.WaiverAmount}<em>元</em></p>
                                                    <p className="info">满{item.Condition}元可用</p>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style3.png'}
                                                        height={61}
                                                        className="floor_get"
                                                    />
                                                    <div className="line" style={{ backgroundColor: value.color }}></div>
                                                    <img
                                                        src={cdnUrl + '/' + 'xkdnewyun/systemfile/coupon/style4.png'}
                                                        height={41}
                                                        className="floor_r"
                                                    />
                                                </div>
                                            </div>
                                        </Col>
                                    }
                                })
                            }

                        </Row> : <div className='CouponFloor'>点击添加优惠券</div>

                }


            </div>
        );
    }
}